<template>
	<div class="body">
		<div class="header">
			<!-- <div class="top">
				<img @click="returnGo" src="../assets/homeimg/滑动左.png" />
				<span>学习日历</span>
			</div> -->
			<div class="myport">
				<div class="port-left">
					<span class="tit">我的学习日历</span>
					<p class="num">有效期至{{obj.end_time}}</p>
				</div>
				<div class="port-right">
					<img :src="img" alt class="avator" />
				</div>
			</div>
			<div class="dtclock">
				<div class="xxts">
					<img src="../assets/homeimg/学习天数.png" />
					<span>{{obj.study_num}}</span>
					<span>学习天数</span>
				</div>
				<div class="xxts">
					<img src="../assets/homeimg/打卡天数.png" />
					<span>{{obj.sign_num}}</span>
					<span>打卡天数</span>
				</div>
			</div>
			<div class="daka">
				<!-- <p>全部打卡</p>
				<p>可减免全部学费</p> -->
				<img style="width:100%;height:100%" src="../assets/homeimg/daka.png" alt="">
			</div>
		</div>

		<div class="date">
			<Calendar :markDate="sign_arr" :markDateMore="arr" v-on:choseDay="clickDay" v-on:changeMonth="changeDate" v-on:isToday="clickToday"></Calendar>
		</div>
		<div class="remark">备注：学习完成条件以此日历每日状态为准，其中半绿、 全绿和全橙都算完成当日学习哦~</div>
	</div>
</template>
<script>
	import Calendar from "vue-calendar-component";
	import courseApi from '@/api/course'
	import { mapState,mapMutations } from 'vuex'
	import { Toast } from 'vant';
	export default {
		data() {
			return {
				obj: {},
				date: "",
				show: false,
				arr: [{
					date: "2020/4/1",
					className: "mark1"
				}],
				token: '',
				id: '',
				sign_arr:[],
				img:''
			};
		},
		components: {
			Calendar
		},
		computed: {

		},
		created() {
			// if (localStorage.getItem("user")) {
			// 	var info = JSON.parse(localStorage.getItem("user"));
			// }
			// this.id = info.id;
			// this.token = info.token;
			window.scrollTo(0,0)
			if(this.$route.query.token){
				this.$store.commit('SAVE_TOKEN',this.$route.query.token);
				this.id = this.$route.query.course_id;
			}
			this.getCalendar();
		},
		methods: {
			returnGo() {
				// this.$router.go(-1);
				window.webkit.messageHandlers.pageBack_js_oc.postMessage([])
			},
			getCalendar() {
				this.$http.post('/api/Leesign/leesign',{course_id: this.id}).then(res => {
					// console.log(res)
					this.obj = res.data;
					this.sign_arr = res.data.days;
					this.arr.forEach(el => {
						// console.log(el.date);
						el.date = this.obj.begin_time
					})
					if(res.data.user_avatar. indexOf('https') == -1){
							this.img = res.data.user_avatar.replace(/http/g, 'https')
						}else{
							this.img = res.data.user_avatar
						}
					// console.log(this.arr)
					this.obj.sign_num = this.obj.days.length;
					// console.log(this.obj.sign_num)
					// var arr = JSON.parse(localStorage.getItem("list"));
					// this.obj.sign_num = arr.length
				})
				// courseApi.leesign({
				// 	course_id: this.id,
				// 	token: this.token
				// }).then(res => {
				// 	console.log(res);
				// 	this.obj = res.data;
				// 	this.arr.forEach(el => {
				// 		console.log(el.date);
				// 		el.date = this.obj.begin_time
				// 	})

				// 	this.obj.sign_num = this.obj.days.length;
				// 	console.log(this.obj.sign_num)
				// 	var arr = JSON.parse(localStorage.getItem("list"));
				// 	this.obj.sign_num = arr.length
				// })
			},
			clickDay(data) {
				// console.log(data); //选中某天
				// if (this.obj.days.includes(data)) {
				// 	this.$toast.success('已打卡');
				// 	return;
				// } else {
				// 	this.obj.days.push(data);
				// 	this.$toast.success('打卡成功');
				// 	// this.obj.sign_num++;
				// 	this.obj.sign_num = this.obj.days.length;
				// }
				// console.log(this.obj.days);
				// localStorage.setItem('list', JSON.stringify(this.obj.days))
			},
			changeDate(data) {
				console.log(data); //左右点击切换月份
			},
			clickToday(data) {
				console.log(data); //跳到了本月
			}
			// formatDate(date) {
			//   return `${date.getMonth() + 1}/${date.getDate()}`;
			// },
			// onConfirm(date) {
			//   this.show = false;
			//   this.date = this.formatDate(date);
			// }
			// returnGo() {
			//   this.$router.go(-1);
			// }
		}
	};
</script>
<style lang="scss" scoped="scoped">
	// ::v-deep .wh_content_item{
	// 	.wh_isMark{
	// 		background-color: #3fd5ba;
	// 		color: #fff;
	// 	}
	// }
	.body {
		width: 100%;
		height: 100%;
		background: #F9F9F9;
		display: flex;
		flex-direction: column;
		padding-bottom: 12.5rem;

		.header {
			width: 100%;
			height: 16.25rem;
			background: url("../assets/homeimg/学习日历背景.png") no-repeat;
			background-size: 100% 100%;

			.top {
				// font-weight: bold;
				width: 100%;
				height: 3.125rem;
				line-height: 3.125rem;
				position: relative;
				color: #333333;
				font-size: 1.1875rem;
				line-height: 3.125rem;

				span {
					font-weight: bold;
					margin-left: 3.125rem;
				}

				img {
					width: 0.625rem;
					height: 1.125rem;
					position: absolute;
					left: 1rem;
					bottom: 1rem;
				}
			}
			
			.myport {
				display: flex;
				justify-content: space-between;
				width: 92%;
				margin: 0 auto;
				margin-top: 0.625rem;
				align-items: center;

				.port-left {
					.tit {
						font-size: 1.3125rem;
						font-family: PingFang SC;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						line-height: 2.1875rem;
					}

					.num {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						line-height: 1.3125rem;
					}
				}

				.port-right {
					width: 3.375rem;
					height: 3.375rem;
					border-radius: 50%;
					margin-top: -0.625rem;

					.avator {
						width: 100%;
						height: 100%;
						border-radius: 40px;
						object-fit: cover;
					}
				}
			}
		}
	}

	// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.top {
			padding-top: constant(safe-area-inset-top);

		}

	}

	@supports(bottom:env(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.top {
			padding-top: env(safe-area-inset-top);

		}

	}

	.dtclock {
		width: 92vw;
		height: 5.625rem;
		margin: 0 auto;
		background: #ffffff;
		margin-top: 0.5rem;
		border-radius: 0.3125rem;
		display: flex;
		align-items: center;
		justify-content: center;

		.xxts:nth-of-type(1) {
			border-right: 2px solid #dcdcdc;
		}

		.xxts {
			display: flex;
			align-items: center;
			width: 50%;
			height: 2.5rem;
			align-items: center;
			margin-left: 1.625rem;

			span:nth-of-type(1) {
				margin: 0 0.3125rem;
				// margin-top: -0.5rem;
				font-size: 1.5rem;
				color: #ffb107;
			}

			span:nth-of-type(2) {
				font-size: 0.75rem;
				color: #666666;
			}

			img {
				width: 2.5rem;
				height: 2.5rem;
				line-height: 2.5rem;
			}
		}
	}

	.daka {
		width: 92vw;
		height: 4.8125rem;
		margin: 0 auto;
		border-radius: 0.3125rem;
		background: #29cda4;
		margin-top: 1.25rem;

		p {
			display: block;
			font-size: 1.25rem;
			font-family: HuXiaoBo-NanShen;
			font-weight: bold;
			color: #ffffff;
			line-height: 1.6875rem;
			margin-left: 0.625rem;
		}

		p:nth-of-type(1) {
			padding-top: 0.625rem;
		}
	}

	.date {
		width: 92vw;
		// height: 21.5625rem;
		margin: 0 auto;
		background: #ffffff;
		margin-top: 5rem;
		border-radius: 0.3125rem;
		// position: relative;
	}

	.remark {
		width: 86vw;
		height: 3.625rem;
		margin: 0 auto;
		background: #FCF8EB;
		border-radius: 0.3125rem;
		font-size: 0.75rem;
		color: #ffaf06;
		padding: 10px;
	}
</style>
<style lang="scss">
	.wh_content_all {
		background: #ffffff !important;

		// margin-bottom: 40px;
		.wh_jiantou1 {
			border-top: 2px solid #333333 !important;
			border-left: 2px solid #333333 !important;
		}

		.wh_jiantou2 {
			border-top: 2px solid #333333 !important;
			border-right: 2px solid #333333 !important;
		}

		.wh_top_changge li {
			color: #333333 !important;
		}

		.wh_content_item {
			height: 50px;
			color: #333333;
			.wh_isMark{
				background-color: #3fd5ba !important;
				color: #fff !important;
			}
			.wh_chose_day{
				background-color: none;
			}
		}

		.wh_item_date {
			color: #333333;

			.wh_other_dayhide {
				color: #dfdfdf;
			}

		}

		.wh_item_date.mark1 {
			border-radius: 50%;
			background: #5E5F6C !important;
			position: relative;
			color: #fff;
		}

		.mark1::after {
			content: '开课';
			position: absolute;
			top: 27px;
			left: 7px;
			font-size: 12px;
			color: #5E5F6C;
		}
	}
</style>
